$(function () {
  function page() {
    //分页器
    const laypage = layui.laypage
    //执行一个laypage实例
    laypage.render({
      elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
      count: 10, //数据总数，从服务端得到
    })
  }
  page()

  //请求数据  渲染
  function getList() {
    $.ajax({
      method: 'GET',
      url: '/ydd_advpos/all',
      headers: {},
      success: function (res) {
        const data = res.data
        // console.log(data);
        const str = data
          .map((item) => {
            const { id, advposname, advposdesc, advpossize, default_data } =
              item
            return `
          <tr>
            <td>${id}</td>
            <td>${advposname}</td>
            <td>${advposdesc}</td>
            <td>${advpossize}</td>
            <td>${default_data}</td>
            <td>
            <button style='width:30px;height:30px;border-radius:50%;text-align:center' type="button" class="layui-btn layui-btn-normal" id="edit" data-id="${id}"><i class="layui-icon"data-id='${id}' >&#xe642;</i></button>
            <button style='width:30px;height:30px;border-radius:50%;text-align:center' type="button" class="layui-btn layui-btn-danger" id="del" data-id="${id}"><i class="layui-icon del "  data-id='${id}'>&#xe640;</i> </button>
            </td>
          </tr>
          `
          })
          .join('')
        $('tbody').html(str)
      },
    })
  }

  getList()

  //添加广告位
  let addindex = null
  $('#add').on('click', function () {
    addindex = layer.open({
      type: 1,
      title: '添加广告位',
      area: ['500px', '300px'],
      content: $('#dialog-add').html(),
    })
  })
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/ydd_advpos/add',
      headers: {},
      data: $(this).serialize(),
      success: function (res) {
        getList()
        layer.msg('添加成功')
        layer.close(addindex)
      },
    })
  })
  $('#xiala').hide()
  //点击右边的折叠 收起输入框
  $('#zhedie').on('click', function () {
    $('.top').hide()
    $('#xiala').show()
    $(this).hide()
  })
  //点击右边的下拉按钮  弹出搜索框
  $('#xiala').on('click', function () {
    $('#xiala').hide()
    $('#zhedie').show()
    $('.top').fadeIn()
  })
  //点击右边的刷新按钮  重新渲染
  $('#shuaxin').on('click', function () {
    location.reload()
    // getList()
  })
  //点击重置按钮  清空搜索框  重新渲染表单
  $('#reset').on('click', function () {
    $('[type="text"]').val('')
    getList()
  })

  //点击搜索  根据名字搜索广告位
  $('#search').on('click', function () {
    const q = {
      advposdesc: '',
      advposname: $('[type="text"]').val(),
      page: '',
      limit: '',
    }
    $.ajax({
      method: 'GET',
      url: '/ydd_advpos/list',
      headers: {},
      data: q,
      success: function (res) {
        const data = res.data.data
        // console.log(data);
        const str = data
          .map((item) => {
            const { id, advposname, advposdesc, advpossize, default_data } =
              item
            return `
        <tr>
          <td>${id}</td>
          <td>${advposname}</td>
          <td>${advposdesc}</td>
          <td>${advpossize}</td>
          <td>${default_data}</td>
          <td>
          <button type="button" class="layui-btn" id="edit" data-id="${id}">编辑</button>
          <button type="button" class="layui-btn" id="del" data-id="${id}">删除</button>
          </td>
        </tr>
        `
          })
          .join('')
        $('tbody').html(str)
      },
    })
  })

  //点击删除按钮  删除广告位
  $('tbody').on('click', '#del', function () {
    const id = $(this).attr('data-id')
    //弹出层
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
      //do something
      //点击确认按钮 发起请求
      $.ajax({
        method: 'GET',
        url: `/ydd_advpos/del${id}`,
        headers: {},
        success: function () {
          layer.msg('删除成功！')
          //重新渲染数据
          getList()
        },
      })
      layer.close(index)
    })
  })

  //点击编辑按钮
  let addindex1 = null
  $('#edit').on('click', function () {
    addindex = layer.open({
      type: 1,
      title: '修改广告位',
      area: ['500px', '300px'],
      content: $('#dialog-edit').html(),
    })
    $('body').on('submit', '#form-edit', function (e) {
      e.preventDefault()
      const id = $(this).attr('data-id')
      const q = {
        id: id,
        advposname: $('[name="adname"]').val(),
        advposdesc: $('[name="adalias"]').val(),
        advpossize: $('[name="adsize"]').val(),
      }
      $.ajax({
        method: 'POST',
        url: '/ydd_advpos/update',
        headers: {},
        data: q,
        success: function (res) {
          getList()
          layer.msg('添加成功')
          layer.close(addindex1)
        },
      })
    })
  })
  $('body').on(`click`, `#quxiao`, function () {
    layer.close(addindex)
  })
})
